<template>
  <div>
    <!-- 历史上的今天的搜索组件 -->
    <div class="search-box">
      <div class="mui-input-row mui-input-search">
        <div class="search-input-box">
          <!-- 父组件向子组件传值--4，子组件用this.取出props数组接收到的值，也是需要用v-bind -->
          <input
            type="search"
            class="mui-input-clear"
            :placeholder="this.parent_placeholder"
            @keyup="search($event)"
            ref="input"
          >
          <span class="mui-icon mui-icon-search"></span>
          <span class="mui-icon mui-icon-clear mui-hidden"></span>
        </div>
      </div>
      <div class="history">
        <div class="cell-title">
          <span>搜索历史</span>
          <span class="mui-icon mui-icon-trash" @click="deleteHistory"></span>
        </div>
        <div class="history-search">
          <span v-for="item in this.p_historyList" :key="item.id" @click="againSearch(item)">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // historyList: []
    };
  },
  // 父组件向子组件传值--3，子组件在props数组中接收
  props: ["parent_placeholder", "p_historyList"],
  methods: {
    search(e,date) {
      // 通过点击搜索历史获取日期，或者键盘输入传值
      // input的值可通过v-model获取
      var value = date || this.$refs.input.value.trim();
      // 子组件向父组件传值--3：子组件定义方法，用$emit触发父组件传过来的方法
      this.$emit("p_keyup", e, value);
    },
    deleteHistory(){
      // 子组件最好不直接删除父组件的数据，可以通过触发父组件的方法进行数据操作
      this.$emit('p_delete')
    },
    againSearch(item){
      var date = item.value
      this.$emit('p_againSearch',date)
    }
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;
.search-box {
  margin-top: 20px;

  .mui-input-search,
  .mui-icon-bars {
    padding: 0 10px;
    .search-input-box {
      position: relative;
      input {
        margin: 0;
        padding-left: 28px;
      }
      .mui-icon-search {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        font-size: 20px;
        color: #999;
      }
    }
  }
  .history {
    margin: 20px 10px;
    .cell-title {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      span {
        padding: 5px;
        color: #fff;
        background: $baseColor;
        border-radius: 5px;
        display: inline-block;
        &:last-of-type{
          background: none;
          color: #666;
        }
      }
    }
    .history-search {
      padding: 10px 0;
      span {
        padding: 5px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.1);
        color: #666;
        display: inline-block;
        margin-bottom: 5px;
        margin-right: 5px;
        line-height: 1;
        font-size: 14px
      }
    }
  }
}
</style>
